<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <div class="table-operator">
      <a-row class="row-item-search"></a-row>
      <!-- 操作板块 -->
      <div class="row-item-tab clearfix">
        <a-button v-action:add type="primary" icon="plus" @click="handleAdd()">新增</a-button>
        <s-table ref="table" rowKey="id" :data="loadData" :columns="columns" :pageSize="15" :loading="isLoading">
          <!-- 操作项 -->
          <span slot="action" slot-scope="text, item">
            <a v-action:edit style="margin-right: 8px" @click="handleEdit(item)">编辑</a>
            <a v-action:delete @click="handleDelete(item)">删除</a>
          </span>
          <!-- <div slot="img" slot-scope="text, item">
                <image :src="text" alt="" />
                {{ text }}
              </div> -->
        </s-table>
      </div>
    </div>

    <AddForm ref="AddForm" @handleSubmit="handleRefresh" />
    <EditForm ref="EditForm" @handleSubmit="handleRefresh" />
  </a-card>
</template>
<script>
import * as Api from '@/api/content/kecheng'
import { ContentHeader, STable } from '@/components'
import EditForm from './modules/EditForm'
import AddForm from './modules/AddForm'
export default {
  name: 'Index',
  components: {
    AddForm,
    EditForm,
    STable,
    ContentHeader,
  },

  data() {
    return {
      loadData: (param) => {
        // console.log(param)
        return Api.getlist(param).then((response) => {
          //   console.log(response)

          return response.data.list
        })
      },

      columns: [
        {
          title: '序号',
          dataIndex: 'id',
        },

        {
          title: '标题',
          dataIndex: 'name',
        },

        {
          title: '创建时间',
          dataIndex: 'create_time',
        },

        {
          title: '查看人数',
          dataIndex: 'virtually_people',
          // scopedSlots: { customRender: 'img' },
          // width: '200px',
        },

        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 正在加载
      isLoading: false,
      // yitianList: [],
    }
  },
  created() {
    // this.getBookList()
    // this.getteacherList()
  },
  methods: {
    /**
     * 获取分类列表
     */
    // getteacherList() {
    //   this.isLoading = true
    //   Api.teacherList()
    //     .then((result) => {
    //       //   console.log('22', result.data)
    //       this.teacherList = result.data.list
    //     })
    //     .finally((result) => {
    //       this.isLoading = false
    //     })
    // },
    // 新增
    handleAdd() {
      this.$refs.AddForm.add()
    },
    /**
     * 编辑记录
     */
    handleEdit(item) {
      // console.log('111', item)
      this.$refs.EditForm.edit(item)
    },
    // 章节
    // kechengInfo(item) {
    //   // console.log('111', item)
    //   this.$refs.kechengInfo.kechengInfo(item)
    // },
    /**
     * 删除记录
     */
    handleDelete(item) {
      const app = this
      const modal = this.$confirm({
        title: '您确定要删除该记录吗?',
        content: '删除后不可恢复',
        onOk() {
          return Api.deleted({ id: item.id })
            .then((result) => {
              app.$message.success(result.message, 1.5)
              app.handleRefresh()
            })
            .finally((result) => {
              modal.destroy()
            })
        },
      })
    },

    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      this.$refs.table.refresh(bool)
    },
  },
}
</script>
<style></style>
